<template>
	<view>
		<view
			class="role"
			v-for="(role, index) in currentRoles"
			:key="index"
			:style="{
				zIndex: index === currentAudio ? 99 : 98,
				background: 'url(' + role.imageUrl + ')0 0/100% 100%',
				width: role.width,
				height: role.height,
				top: role.top,
				left: role.left
			}"
		>
			<image
				src="../../static/audio.png"
				v-if="index === currentAudio && currentRoles[index].dialogueAudioUrl"
				:animation="animationData[index]"
				@tap="roleAudio(role, index)"
				:style="{
					width: roleAudioStyle(role).width,
					height: roleAudioStyle(role).height,
					left: roleAudioStyle(role).left,
					right: roleAudioStyle(role).right
				}"
			></image>
		</view>
	</view>
</template>

<script>
export default {
	props: ['currentRoles'],
	data() {
		return {
			animationData: [],
			animation: [],
			currentAudio: 0
		}
	},
	mounted() {
		for (let i = 0, len = this.currentRoles.length; i < len; i++) {
			this.animation.push(
				uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
			)
		}
	},
	computed: {
		//播放按钮位置
		roleAudioStyle(role) {
			return function(role) {
				const position = parseFloat(role.left) > 50 ? 'left' : 'right'
				const size = parseFloat(role.width) / parseFloat(role.height) > 1.4 ? ((parseFloat(role.width) * 0.3) / 100) * 720 : ((parseFloat(role.height) * 0.3) / 100) * 500
				const rightPosition = role.styleKey === 'bottom-right' ? '-100%' : '0'
				return {
					width: size + 'rpx',
					height: size + 'rpx',
					left: position === 'left' ? 0 : 'none',
					right: position === 'right' ? rightPosition : 'none',
					top: role.styleKey === 'top-left' ? '0' : 'none'
				}
			}
		}
	},
	methods: {
		roleAudio: function(role, index) {
			this.touchAudio()
			this.$parent.setIndexDialogue(role)
			this.animation[index].scale(1.2).step()
			this.animationData[index] = this.animation[index].export()
			setTimeout(() => {
				this.animation[index].scale(1).step()
				this.animationData[index] = this.animation[index].export()
			}, 5000)
			this.dialogueAudio({
				src: role.dialogueAudioUrl,
				end: () => {
					this.$parent.setIndexDialogue({})
					this.animation[index].scale(1).step()
					this.animationData[index] = this.animation[index].export()
					this.currentAudio = this.currentAudio < this.currentRoles.length - 1 ? this.currentAudio + 1 : 0
				}
			})
		}
	}
}
</script>

<style lang="stylus">
.role
	position absolute
	image
		position absolute
		bottom 10%
		max-width 90rpx
		max-height 90rpx
		min-width 40rpx
		min-height 40rpx
		animation outIn 0.5s
</style>
